<template>
    <view class="container">
        <view class="form_box">
            <u-form
                labelPosition="left"
                ref="formRef"
                :model="form"
                :rules="rules"
                labelWidth="120"
                style="padding-bottom: 100rpx;"
            >
                <u-form-item label="人员姓名" prop="name" borderBottom required>
                    <u-input v-model="form.name" placeholder="请输入人员姓名" border="none" inputAlign="right" readonly/>
                </u-form-item>
                <u-form-item label="身份证号" prop="identityNumber" borderBottom required>
                    <u-input v-model="form.identityNumber" placeholder="请输入身份证号" border="none" inputAlign="right" readonly/>
                </u-form-item>
                <u-form-item label="签发机关" prop="identityOrg" borderBottom required>
                    <u-input v-model="form.identityOrg" placeholder="请输入签发机关" border="none" inputAlign="right" readonly/>
                </u-form-item>
                <u-form-item label="有效期限起始" prop="issuedTime" borderBottom required>
                    <view class="select-box" >
                        <u-input v-model="form.issuedTime" placeholder="请选择有效期限起始" border="none" readonly inputAlign="right" />
                    </view>
                </u-form-item>
                <u-form-item label="有效期限截至" prop="expiredTime" borderBottom required>
                    <view class="select-box" >
                        <u-input v-model="form.expiredTime" placeholder="请选择有效期限截至" border="none" readonly inputAlign="right"/>
                    </view>
                </u-form-item>
                <u-form-item label="文化程度" prop="education" borderBottom required>
                    <view class="select-box" >
                        <u-input v-model="form.educationText" placeholder="请选择文化程度" border="none" readonly inputAlign="right"/>
                        <view class="bg-transparent" @click="handleShowPicker(1)"></view>
                    </view>
                </u-form-item>
                <u-form-item label="政治面貌" prop="politicalStatus" borderBottom required>
                    <view class="select-box" >
                        <u-input v-model="form.politicalStatusText" placeholder="请选择政治面貌" border="none" readonly inputAlign="right"/>
                        <view class="bg-transparent" @click="handleShowPicker(2)"></view>
                    </view>
                </u-form-item>
                <u-form-item label="联系电话" prop="phone" borderBottom required>
                    <u-input v-model="form.phone" placeholder="请输入联系电话" border="none" inputAlign="right" :readonly="form.type == 1"/>
                </u-form-item>
                
                <template v-if="form.type == 2">
                    <u-form-item label="人员民族" prop="nation" borderBottom required>
                        <view class="select-box" >
                            <u-input v-model="form.nationText" placeholder="请选择人员民族" border="none" readonly inputAlign="right"/>
                            <view class="bg-transparent" @click="handleShowPicker(3)"></view>
                        </view>
                    </u-form-item>
                    <u-form-item label="婚姻状态" prop="marriageStatus" borderBottom required>
                        <view class="select-box" >
                            <u-input v-model="form.marriageStatusText" placeholder="请选择婚姻状态" border="none" readonly inputAlign="right"/>
                            <view class="bg-transparent" @click="handleShowPicker(4)"></view>
                        </view>
                    </u-form-item>
                    <u-form-item label="重大疾病史" prop="hasMajorDisease" borderBottom >
                        <view class="select-box" >
                            <u-input v-model="form.hasMajorDiseaseText" placeholder="请选择组织机构" border="none" readonly inputAlign="right"/>
                            <view class="bg-transparent" @click="handleShowPicker(5)"></view>
                        </view>
                    </u-form-item>
                    <u-form-item label="紧急联系人" prop="linkMan" borderBottom >
                        <u-input v-model="form.linkMan" placeholder="请输入人员姓名" border="none" inputAlign="right"/>
                    </u-form-item>
                    <u-form-item label="联系人电话" prop="linkManPhone" borderBottom >
                        <u-input v-model="form.linkManPhone" placeholder="请输入紧急联系人电话" border="none" inputAlign="right" />
                    </u-form-item>
                </template>
            </u-form>
        </view>

        <view class="next_btn_box">
            <u-button class="next_btn" type="primary" color="#007aff" @click="handleNext">下一步</u-button>
        </view>
        <sy-picker ref="pickerShow" mobile="1" :type="0" :items="columns" @select="pickerConfirm" />
    </view>
    
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import {eduLevel, political, nation_list, marital_status, is_major_disease } from "@/utils/common.js"

const data = reactive({
    form: {},
    rules: {
        name:[
            {
                required: true,
                message: '请输入姓名',
                trigger: ['blur', 'change']
            }
        ],
        identityNumber:[
            {
                required: true,
                message: '请输入身份证号',
                trigger: ['blur', 'change']
            },
            {
                pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                message: '身份证号格式不正确',
                trigger: ['blur', 'change']
            }
        ],
        identityOrg: [
            {
                required: true,
                message: '请输入签发机关',
                trigger: ['blur', 'change']
            }
        ],
        issuedTime: [
            {
                required: true,
                message: '请选择有效期限起始',
                trigger: ['blur', 'change']
            }
        ],
        expiredTime: [
            {
                required: true,
                message: '请选择有效期限截至',
                trigger: ['blur', 'change']
            }
        ],
        education: [
            {
                required: true,
                message: '请选择文化程度',
                trigger: ['blur', 'change']
            }
        ],
        politicalStatus: [
            {
                required: true,
                message: '请选择政治面貌',
                trigger: ['blur', 'change']
            }
        ],
        phone: [
            {
                required: true,
                message: '请输入联系电话',
                trigger: ['blur', 'change']
            },
            {
                pattern: /^1[3456789]\d{9}$/,
                message: '联系电话格式不正确',
                trigger: ['blur', 'change']
            }
        ],
        nation: [
            {
                required: true,
                message: '请选择民族',
                trigger: ['blur', 'change']
            }
        ],
        marriageStatus: [
            {
                required: true,
                message: '请选择婚姻状态',
                trigger: ['blur', 'change']
            }
        ],
        linkManPhone:[
            {
                pattern: /^1[3456789]\d{9}$/,
                message: '联系电话格式不正确',
                trigger: ['blur', 'change']
            }
        ]
    }
})
const { form, rules } = toRefs(data)

/* picker选择 */
const pickerShow = ref()
const pickerType = ref(1)
const columns = ref()
// picker配置
const pickerConfigMap = new Map([
  [1, { columns: eduLevel, valueKey: 'education', textKey: 'educationText' }],
  [2, { columns: political, valueKey: 'politicalStatus', textKey: 'politicalStatusText' }],
  [3, { columns: nation_list, valueKey: 'nation', textKey: 'nationText' }],
  [4, { columns: marital_status, valueKey: 'marriageStatus', textKey: 'marriageStatusText' }],
  [5, { columns: is_major_disease, valueKey: 'hasMajorDisease', textKey: 'hasMajorDiseaseText' }]
])

function handleShowPicker(type) {
  const config = pickerConfigMap.get(type)
  if (!config) return
  
  pickerType.value = type
  columns.value = config.columns
  pickerShow.value.showPicker()
}

function pickerConfirm(e) {
  const config = pickerConfigMap.get(pickerType.value)
  if (!config) return
  
  form.value[config.valueKey] = e.value
  form.value[config.textKey] = e.text
}

/* 下一步 */
const formRef = ref(null)
function handleNext() {
    formRef.value.validate().then(valid=>{
        uni.setStorageSync('certificationInfo', JSON.stringify(form.value))
        uni.navigateTo({
            url: '/pagesC/certification/takePhoto/index'
        })
    }).catch(errors => {
        uni.showToast({
            title: errors[0].message,
            icon: 'none'
        })
    })

}

onReady(()=>{
    formRef.value.setRules(rules.value)
})

onShow(()=> {
    //获取本地存储的认证信息
    const certificationInfo = JSON.parse(uni.getStorageSync('certificationInfo'))
    if(certificationInfo) {
        form.value = certificationInfo
        console.log('form222', form.value)
    }
})
</script>

<style lang="scss" scoped>
@import '../../static/style/index.scss';

.container{
    .form_box{
        padding: 0 30rpx 0 30rpx;
        padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
        .select-box{
            width: 100%;
            position: relative;
            overflow: hidden;
            .bg-transparent{
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
                width: 100%;
                height: 100%;
            }
        }
    }
}
::v-deep .input-placeholder{
    color: #c0c4cc;
    text-align: right;
}
::v-deep .u-form-item__body__right__message{
    text-align: right;
}
::v-deep .u-form-item__body{
    padding: 30rpx 0 !important;
}

</style>